import { InjectionKey } from 'vue'
import { createStore, Store, useStore as baseUseStore } from 'vuex'
import app, { IAppState } from '@/store/modules/app'
import tagsView, { ITagsViewState } from '@/store/modules/tagsView'
import settings, { ISettingsState } from '@/store/modules/settings'
import user, { IUserState } from '@/store/modules/user'
import getters from '@/store/getters'
import createPersistedState from 'vuex-persistedstate'

export interface IRootState {
  app: IAppState,
  tagsView: ITagsViewState,
  user: IUserState,
  settings: ISettingsState
}

export const key: InjectionKey<Store<IRootState>> = Symbol()

const persisteAppState = createPersistedState({
  storage: window.sessionStorage,
  key: 'vuex_app',
  /* 针对一个路径下 进行数据缓存 */
  paths: [ 'app.sidebar.opened', 'app.size' ]
})

const persisteSettingsState = createPersistedState({
  storage: window.sessionStorage,
  key: 'vuex_setting',
  paths: [ 'settings.theme', 'settings.originalStyle', 'settings.tagsView', 'settings.sidebarLogo' ]
})

export default createStore<IRootState>({
  plugins: [
    persisteAppState,
    persisteSettingsState
  ],
  getters,
  modules: { app, tagsView, settings, user }
})

export function useStore() {
  return baseUseStore(key)
}
